import React,{useState,useEffect, Suspense} from 'react';
import "@/views/Index/Home/Home.scss"
import {CodepenOutlined,HomeOutlined,SettingOutlined} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu,theme } from 'antd';
import { Outlet,useNavigate } from 'react-router-dom';
import { useDispatch} from 'react-redux';
import shuju from  '../../router/shuju'
const { Header, Content, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];

interface Props{

}

function Assets(props:Props) {

  var navigate = useNavigate();
  var dispatch = useDispatch()
  const [lujing, setLujing] = useState([]);
  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
    } as MenuItem;
  }
  const items2: MenuItem[] = [
    getItem('资产管理', 'sub1', <CodepenOutlined />,
     [  
        // getItem('资产列表', '1','/index/assets/assetmanagement/list'),
        // getItem('资产类别', '2','/index/assets/assetmanagement/kind'),
        // getItem('仓库管理', '3','/index/assets/assetmanagement/manage'),
        // getItem('资产盘点', '4','/index/assets/assetmanagement/assetInventory'),
        getItem('资产列表','/index/assets/assetmanagement/list'),
        getItem('资产类别','/index/assets/assetmanagement/kind'),
        getItem('仓库管理','/index/assets/assetmanagement/manage'),
        getItem('资产盘点','/index/assets/assetmanagement/assetInventory'),
  ]),
    getItem('库存管理', 'sub2', <HomeOutlined />, 
    [getItem('采购单', '/index/assets/inventorymanagement/purchaseorder'),
    getItem('借用', '/index/assets/inventorymanagement/borrow'),
  ]),
    getItem('设置', '/index/assets/setup', <SettingOutlined />),
  ]
  var handleClick = ({ item, key, keyPath }:any )=>{
    console.log(item,key,keyPath);
    var lujing = keyPath.reverse()
    setLujing(lujing)
    dispatch({ type:'SAVE_KEYPATH',payload: keyPath });//保存keypath
    navigate(key);//跳路由
}
      const {
        token: { colorBgContainer },
      } = theme.useToken();
    return (
        <div className='assets'>
               <Layout>
        <Sider width={200} style={{ backgroundColor:'white' }}>
          <Menu
            theme="light"
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0  }}
            items={items2}
            onClick={handleClick}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            {
                lujing.map((item, index) => {
                  return (
                    <Breadcrumb.Item key={index}>{shuju[item]}</Breadcrumb.Item>
                  )
                })
              }
          </Breadcrumb>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
            }}
          >
           <Suspense fallback={<div className='loading'><img src="https://hbimg.b0.upaiyun.com/42c725b3935a1ce3e32897b9995c1b6a2e921d335690-Ck6vZO_fw658" alt="" /></div>}>
            <Outlet />
            </Suspense>
          </Content>
        </Layout>
      </Layout>
        </div>
    );
  };

export default Assets;